<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
import * as echarts from "echarts";
import { onMounted, inject, reactive, nextTick, watch } from "vue";
// import { EventBus } from "./eventBus.js";
let days = '';
const props = defineProps({
  mapData: Object,
});

watch(props.mapData, () => {
  getBackHomeCount();
});

// 切换时间
function changeDay(val) {
  days = val;
  getBackHomeCount();
}

const $axios = inject("$axios");

// 定义数据
const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);

// 获取数据
function getBackHomeCount() {
  tableData.splice(0, tableData.length);
  $axios
    .get("/api/overview/placeScan", {
      params: {
        areaCode: props.mapData.areaCode,
        days,
      },
    })
    .then((res) => {
      res.data.data.forEach((item) => {
        tableData.push(item);
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

let timer = null;

function autoScroll() {
  const el = document.querySelector("#tableList2");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  if (timer) {
    clearInterval(timer);
  }
  timer = setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 100);
}

function getChartData(type) {
  $axios
    .get("place_scan_rec/placeSaceRate", { params: { period: type } })
    .then((res) => {
      const data = [];
      res.data.data.forEach((item) => {
        data.push({
          value: item.times,
          name: item.name,
        });
      });
      option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "3%",
          right: "58%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          top: "21%",
          orient: "vertical",
          right: "7%",
          formatter: function (name) {
            // 获取legend显示内容
            let data = option.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
          textStyle: {
            //图例字体大小
            color: "#fff",
            fontSize: 16,
          },
          //图例大小
          itemHeight: 20,
          itemWidth: 30,
          //图例滚动显示
          type: "scroll",
          //图例纵向显示
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["58%", "70%"],
            avoidLabelOverlap: false,
            left: "-40%",
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // { value: 1048, name: "小区", itemStyle: { color: "#3E9DFF" } },
              // { value: 735, name: "超市", itemStyle: { color: "#1ACFFF" } },
              // { value: 580, name: "医院", itemStyle: { color: "#42FBFE" } },
              // { value: 484, name: "公共场所", itemStyle: { color: "#37FAC6" } },
            ],
          },
        ],
      };

      option.series[0].data = data;
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    });
}

var dom;
var myChart;
var option;
function openWindow() {
  window.open("https://bpmn.honqun.com/admin/#/yq/PlaceScanRec")
}
onMounted(() => {
  getBackHomeCount();
  // eventBus 获取地图数据
  // EventBus.$on("getMapData", (data) => {
  //   console.log('eventBus', data)
  // });
  // dom = document.getElementById("pieChart");
  // myChart = echarts.init(dom, null, {
  //   renderer: "canvas",
  //   useDirtyRect: false,
  // });

  //getChartData("月");
});
</script>

<template>
  <MoniterItem
    one
    three
    seven
    title="辖区重要场所扫码情况"
    @timeUnitClicked="getChartData"
    @changeDay="changeDay"
  >
    <template #right>
        <a href="/admin/#/yq/PlaceCodeScanRec" style="color: #00f9ff;text-decoration: none;" target="_blank">更多》</a>
    </template>
    <template #content>
      <!-- <div style="height: 100%" id="pieChart"></div> -->
      <div class="line" style="font-size: 14px; font-weight:600; margin-top: 30px">
        <div style="flex: 0.5">序号</div>
        <div style="flex: 1">场所名称</div>
        <div style="flex: 0.8">场所类型</div>
        <div style="flex: 0.8">当日扫码量</div>
        <div style="flex: 0.8">当日黄码量</div>
        <div style="flex: 0.8">当日红码量</div>
      </div>
      <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList2">
        <div
          :class="{ line: true, lineColor: index % 2 === 1 }"
          v-for="(item, index) in tableData"
          :key="index"
          ref="tableRef"
        >
          <div style="flex: 0.5" class="circle-box">
            <div class="circle">{{ index + 1 }}</div>
          </div>
          <div style="flex: 1">{{ item.placeName }}</div>
          <div style="flex: 0.8">{{ item.placeType }}</div>
          <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
          <div style="flex: 0.8; color: #FFD200">{{ item.yellows }}</div>
          <div style="flex: 0.8; color: #F95352">{{ item.reds }}</div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
a.more {
  color: #00f9ff;
  text-decoration: none;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
